HTML DOM API
DOM API (Application Programming Interface) என்பது JavaScript க்கு HTML உறுப்புகளின் உள்ளடக்கம், கட்டமைப்பு மற்றும் பாணியை மாற்ற அனுமதிக்கும் முறைகள் மற்றும் பண்புகளின் தொகுப்பாகும்.
DOM HTML மரம்
ஒரு API முறை என்பது நீங்கள் ஒரு HTML உறுப்பில் செய்யக்கூடிய ஒரு செயலாகும்.
ஒரு API பண்பு என்பது நீங்கள் ஒரு HTML உறுப்பில் அணுகக்கூடிய ஒரு மதிப்பாகும்.
எடுத்துக்காட்டு
<html>
<body>
<p id="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>எடுத்துக்காட்டு விளக்கம்
document என்பது HTML ஆவணமாகும்.
getElementById() என்பது ஒரு ஆவண முறையாகும்.
myPara = getElementById("demo") "demo" உறுப்பைப் பெறுகிறது.
innerHTML என்பது ஒரு உறுப்புப் பண்பாகும்.
myPara.innerHTML = "Hello World!" பண்பை மாற்றுகிறது.
HTML DOM API திறன்கள்
DOM API நமக்கு பின்வரும் திறன்களை வழங்குகிறது:
- உறுப்புகளைக் கண்டுபிடித்து தேர்ந்தெடுக்கவும்
- உறுப்பு உள்ளடக்கம் மற்றும் பண்புக்கூறுகளை மாற்றவும்
- உறுப்புகளைச் சேர்க்கவும், நீக்கவும் அல்லது மாற்றவும்
- CSS பாணிகளை மாற்றவும்
- பயனர் உள்ளீட்டிற்கு எதிர்வினையாற்ற நிகழ்வு கேட்பிகளைச் சேர்க்கவும்
JavaScript மொழி
DOM API என்பது HTML DOM உறுப்புகளைப் பெற, மாற்ற, சேர்க்க அல்லது நீக்குவது எப்படி என்பதற்கான ஒரு தரநிலையாகும்.
JavaScript என்பது API வழியாக DOM ஐ அணுக உலாவிகளில் பயன்படுத்தப்படும் மொழியாகும்.
API முறைகள் மற்றும் பண்புகள்
டெவலப்பர்கள் எந்தவொரு API க்கும் நுழைவு புள்ளிகளாக document மற்றும் window போன்ற உலகளாவிய பொருள்களைப் பயன்படுத்துகின்றனர்.
நீங்கள் ஒரு HTML பக்கத்தில் எந்த உறுப்பையும் அணுக விரும்பினால், எப்போதும் document பொருளை அணுகுவதன் மூலம் தொடங்குவீர்கள். document பொருள் உங்கள் வலைப்பக்கத்தைக் குறிக்கிறது.
JavaScript உடன் HTML ஐ கையாள, நீங்கள் முதலில் ஒரு உறுப்பைத் தேர்ந்தெடுக்க வேண்டும்.
HTML ஐ அணுக document பொருளை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில எடுத்துக்காட்டுகள் கீழே உள்ளன:
HTML உறுப்புகளைத் தேர்ந்தெடுத்தல்
| முறை | விளக்கம் |
|---|---|
| document.getElementById(id) | உறுப்பு ஐடி மூலம் ஒரு உறுப்பைக் கண்டறியவும் |
| document.getElementsByTagName(name) | டேக் பெயர் மூலம் உறுப்புகளைக் கண்டறியவும் |
| document.getElementsByClassName(name) | வகுப்புப் பெயர் மூலம் உறுப்புகளைக் கண்டறியவும் |
| document.querySelector(selector) | CSS தேர்ந்தெடுப்பாளருடன் பொருந்தும் முதல் உறுப்பைக் கண்டறியவும் |
| document.querySelectorAll(selector) | CSS தேர்ந்தெடுப்பாளருடன் பொருந்தும் அனைத்து உறுப்புகளையும் கண்டறியவும் |
குறிப்பு:
document பொருள் உங்கள் வலைப்பக்கத்தில் உள்ள மற்ற அனைத்து பொருள்களுக்கும் உரிமையாளராகும்.
உறுப்பு உள்ளடக்கத்தை அணுகுதல்
| பண்பு | விளக்கம் |
|---|---|
| element.innerHTML | ஒரு உறுப்பின் HTML உள்ளடக்கம் |
| element.textContent | ஒரு உறுப்பின் உரை உள்ளடக்கம் |
உறுப்புப் பண்புக்கூறுகளை அணுகுதல்
| பண்பு | விளக்கம் |
|---|---|
| element.attribute | HTML உறுப்பின் பண்புக்கூறு மதிப்பை மாற்றவும் |
| element.style.property | HTML உறுப்பின் பாணி |
உறுப்புப் பண்புக்கூறுகளை மாற்றுதல்
| முறை | விளக்கம் |
|---|---|
| element.setAttribute() | புதிய பண்புக்கூறை உருவாக்கவும் அல்லது அமைக்கவும் |
கட்டமைப்பைக் கையாளுதல்
| முறை | விளக்கம் |
|---|---|
| document.createElement() | புதிய HTML உறுப்பை உருவாக்குகிறது |
| document.removeChild() | HTML உறுப்பை அகற்றவும் |
| document.appendChild() | HTML உறுப்பைச் சேர்க்கவும் |
| document.replaceChild() | HTML உறுப்பை மாற்றவும் |
நிகழ்வு கையாளுநர்களைச் சேர்த்தல்
| முறை | விளக்கம் |
|---|---|
| document.getElementById(id).onclick = function(){code} | ஒரு onclick நிகழ்வுக்கு நிகழ்வு கையாளுநர் குறியீட்டைச் சேர்த்தல் |